<template>
  <div>
    <section v-if="boo" class="blkbkg">
      <div class="spcarmsg">
        <div class="gouwutit">
          <div>购物车</div>
          <div @click="qingkong">清空</div>
        </div>
        <ul>
          <li v-for="(item,index) in bianli()" :key="index">
            <span class="shopname">{{item.name}}</span>
            <span class="onlyall">￥{{item.num*item.price}}</span>
            <div class="jiajian"><v-num :food="item"></v-num></div>
          </li>
        </ul>
      </div>
    </section>
    <div class="thefooter">
      <div class="gouwucar">
        <div>
          <svg style="width: 0.48rem;height: 0.48rem;">
            <image xlink:href="../../../static/img/shopping_cart.svg" style="width: 0.48rem;height: 0.48rem"></image>
          </svg>
        </div>
        <div @click="boo=!boo" v-if="nmb>0" class="haveshop">
          <svg style="width: 0.48rem;height: 0.48rem;">
            <image  xlink:href="../../../static/img/shopping_cart.svg" style="width: 0.48rem;height: 0.48rem"></image>
          </svg>
          <span>{{nmb}}</span>
        </div>
      </div>
      <span class="pre">￥{{allprice}}</span>
      <i class="shuxian"></i>
      <span class="peisong">另付配送费￥4元</span>
      <div class="allpir">{{chajia}}</div>
      <div v-if="allprice>=20" class="nextallpir">去结算</div>
    </div>
  </div>
</template>
<script>
import vNum from '../obody/thenum'
export default {
  name: 'ofooter',
  data () {
    return {
      shuzi: '',
      boo: false
    }
  },
  components: {
    vNum
  },
  computed: {
    shopcar () {
      return this.$store.state.count.goods
    },
    nmb () {
      let b = 0
      for (let i = 0; i < this.bianli().length; i++) {
        b = b + this.bianli()[i].num
      }
      return b
    },
    allprice () {
      let b = 0
      for (let i = 0; i < this.bianli().length; i++) {
        b = b + this.bianli()[i].num * this.bianli()[i].price
      }
      return b
    },
    chajia () {
      if (this.allprice <= 0) {
        return '￥20起送'
      } else {
        let a = 20 - this.allprice
        return '还差￥' + a + '起送'
      }
    }
  },
  created () {
    setTimeout(() => {
    }, 100)
  },
  updated () {
    if (!this.bianli()[0]) {
      this.boo = false
    }
  },
  methods: {
    bianli () {
      let a = this.$store.state.count.goods
      let all = []
      if (a) {
        for (let i = 0; i < a.length; i++) {
          for (let j = 0; j < a[i].foods.length; j++) {
            if (a[i].foods[j].num > 0 && a[i].foods[j].num) {
              all.push(a[i].foods[j])
            }
          }
        }
      }
      return all
    },
    qingkong () {
      if (this.bianli()) {
        let a = this.$store.state.count.goods
        if (a) {
          for (let i = 0; i < a.length; i++) {
            for (let j = 0; j < a[i].foods.length; j++) {
              if (a[i].foods[j].num > 0 && a[i].foods[j].num) {
                a[i].foods[j].num = 0
              }
            }
          }
        }
      }
    }
  }
}
</script>
<style scoped lang="less">
  .thefooter{
    position: fixed;
    bottom: 0;
    height: 1rem;
    width: 100%;
    background: #141d27;
    .gouwucar{
      position: absolute;
      top: -0.2rem;
      left: 0.2rem;
      width: 1.12rem;
      height: 1.12rem;
      background: #141d27;
      border-radius: 50%;
      div{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        width: 0.88rem;
        height: 0.88rem;
        background: rgba(255,255,255,0.4);
        border-radius: 50%;
        svg{
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%,-50%);
        }
      }
      .haveshop{
        background: rgb(0,160,220);
        span{
          position: absolute;
          top: 0;
          right: 0;
          transform: translate(25%,-25%);
          display: inline-block;
          height: 0.24rem;
          line-height: 0.24rem;
          padding: 0 0.12rem;
          border-radius: 0.12rem;
          background: red;
          font-size: 0.18rem;
          font-weight: 700;
          color: rgb(255,255,255);
        }
      }
    }
    .pre{
      font-size: 0.32rem;
      color: rgba(255,255,255,0.4);
      margin-left: 1.6rem;
      /*line-height: 1rem;*/
    }
    .shuxian{
      display: inline-block;
      margin-top:0.2rem ;
      height: 0.6rem;
      width: 0.01rem;
      background-color: rgba(255,255,255,0.4);
      vertical-align: middle;
      /*margin-left: 0.24rem;*/
      /*margin-right: 0.24rem;*/
    }
    .peisong{
      font-size: 0.28rem;
      color: rgba(255,255,255,0.4);
    }
    .allpir{
      width: 2.1rem;
      height: 1rem;
      background-color: rgba(255,255,255,0.4);
      position: absolute;
      top: 0;
      right: 0;
      text-align: center;
      line-height: 1rem;
      font-size: 0.24rem;
      font-weight: 700;
    }
    .nextallpir{
      width: 2.1rem;
      height: 1rem;
      background-color: rgba(0,160,220);
      color: white;
      position: absolute;
      top: 0;
      right: 0;
      text-align: center;
      line-height: 1rem;
      font-size: 0.24rem;
      font-weight: 700;
    }
  }
  .blkbkg{
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    background-color: rgba(7,17,27,0.6);
    .spcarmsg{
      width: 100%;
      position: absolute;
      bottom: 1rem;
      .gouwutit{
        padding:0 0.36rem;
        box-sizing: border-box;
        background: #f3f5f7;
        width: 100%;
        height: 0.8rem;
        &>div:nth-child(1){
          float: left;
          font-size: 0.28rem;
          font-weight: 200;
          color: rgb(7,17,27);
          line-height: 0.8rem;
        }
        &>div:nth-child(2){
          float: right;
          font-size: 0.24rem;
          font-weight: 200;
          color: rgb(0,160,220);
          line-height: 0.8rem;
        }
      }
      &>ul{
        padding: 0 0.36rem;
        box-sizing: border-box;
        background-color:white ;
        li{
          position: relative;
          height: 0.96rem;
          border-bottom: 0.02rem rgba(7,17,27,0.3) solid;
          .shopname{
            font-size: 0.28rem;
            color: rgb(7,17,27);
            line-height: 0.96rem;
          }
          .onlyall{
            position: absolute;
            top: 0;
            right: 1.8rem;
            font-size: 0.28rem;
            color: rgb(240,20,20);
            line-height: 0.96rem;
          }
          .jiajian{
            position: absolute;
            top:50%;
            transform: translateY(-50%);
            right: 0rem;
            width: 1.4rem;
          }
        }
      }
    }
  }
</style>
